import React,{ Component } from 'react'
import components from '@/components'
import { Row } from 'antd'
import { connect } from 'react-redux'
import actions from '@/actions/rechargeRecord'
import enumActions from '@/actions/enum'

const { Card, RechargeRecordSearch, RechargeRecordTable } = components

class RechargeRecord extends Component {
  render() {

    const { props } = this

    const searchProps = {
      orderNum: props.orderNum,
      type: props.type,
      rechargeTypeEnum: props.rechargeTypeEnum,
      startTime: props.startTime,
      endTime: props.endTime,
      onChangeOrderNum: this.onChangeOrderNum,
      onChangeType: this.onChangeType,
      onChangeStartTime: this.onChangeStartTime,
      onChangeEndTime: this.onChangeEndTime,
      onSearch: this.onSearch,
    }

    const tableProps = {
      pageNum: props.pageNum, 
      pageSize: props.pageSize, 
      total: props.total, 
      loading: props.loading, 
      data: props.data, 
      rechargeTypeEnum: props.rechargeTypeEnum, 
      onChangePagination: this.onChangePagination
    }

    return (
      <Card title="日统计数据">
        <Row style={{ padding:24, backgroundColor: '#fff' }}>
          <RechargeRecordSearch {...searchProps} />
          <RechargeRecordTable {...tableProps} />
        </Row>
      </Card>
    )
  }

  componentDidMount() {
    this.props.getUserRechargeTypeEnum()
    this.props.getData()
  }

  onChangeOrderNum = ({ target: { value }}) => {
    this.props.setOrderNum(value)
  }

  onChangeType = (value) => {
    this.props.setType(value)
  }

  onChangeStartTime = (value) => {
    this.props.setStartTime(value)
  }

  onChangeEndTime = (value) => {
    this.props.setEndTime(value)
  }

  onSearch = () => {
    this.props.setPageNum(1)
    this.props.getData()
  }

  onChangePagination = (value) => {
    this.props.setPageNum(value)
    this.props.getData()
  }

}

const mapStateToProps = (({ rechargeRecordReducer, enumReducer:{ rechargeTypeEnum } }) => ({ ...rechargeRecordReducer, rechargeTypeEnum }))

const mapDispatchToProps = {
  ...actions, 
  getUserRechargeTypeEnum: enumActions.getUserRechargeTypeEnum 
}

export default connect(mapStateToProps, mapDispatchToProps)(RechargeRecord)